<!DOCTYPE html>

<html lang="en-US">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery Waypoints Infinite Shortcut</title>
  <meta name="description" content="A jQuery Waypoints shortcut extension for easier infinite scrolling">
  <meta name="viewport" content="width=480">

  <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Lato:400,700|PT+Serif:700' rel='stylesheet' type='text/css'>
  <style type="text/css">
    * {
      margin:0;
      padding:0;
    }

    body {
      font-size:16px;
      line-height:1.5;
      color:#6a6272;
      background:#d5c5e5;
      padding-bottom:16px;
      font-family:"Lato", sans-serif;
    }

    .inner {
      width:460px;
      padding:0 10px;
      margin:0 auto;
    }

    h1, h2, h3, h4 {
      font-family:"PT Serif", serif;
      font-weight:normal;
    }

    h1 {
      font-size:53px;
      color:#444a50;
    }

    h2 {
      text-align:center;
      background:#6a6272;
      color:#eae2f2;
      font-size:24px;
    }

    pre {
      white-space:pre-wrap;
      font-size:14px;
      background:#fff;
      padding:10px;
    }

    code {
      font-family:"Ubuntu Mono", monospace;
    }

    p, pre, ul, .example, dl {
      margin-top:16px;
    }

    h3 {
      font-size:24px;
    }

    ol {
      margin-left:12px;
    }

    li {
      margin-top:6px;
    }

    .steps {
      background:#6a6272;
      color:#eae2f2;
      padding:16px 0;
      margin-top:16px;
    }

    .options {
      background:#6a6272;
      color:#eae2f2;
      padding:16px 0;
      margin-top:16px;
    }

    dt {
      font-weight:bold;
      color:#fff;
      margin-top:6px;
    }

    dd {
      margin-left:16px;
    }

    .fn {
      color:#111;
    }
    .kw {
      color:#a33;
    }
    .str {
      color:#3a3;
    }
    .cm {
      color:#33a;
    }
    .key {
      color:#939;
    }

    p code, li code, dl code {
      padding:0 2px;
      background:#eae2f2;
    }

    .steps li code, .options dl code {
      background:#444a50;
    }

    .options strong, .steps strong {
      color:#fff;
    }

    pre code {
      color:#888;
    }

    .infinite-container {
      width:480px;
      margin-left:-20px;
      overflow:hidden;
      position:relative;
    }

    .infinite-container.infinite-loading:after {
      content:"Loading...";
      height:30px;
      line-height:30px;
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      text-align:center;
      background:#6a6272;
      color:#eae2f2;
    }

    .infinite-item {
      float:left;
      width:100px;
      height:100px;
      background:#444a50;
      margin:20px 0 20px 20px;
    }
    .infinite-item:nth-child(3n) {
      background:#6a6272;
    }
    .infinite-item:nth-child(3n+1) {
      background:#eae2f2;
    }

    .infinite-more-link {
      visibility:hidden;
    }
  </style>
</head>
<body>

<div class="header inner">
  <h1>jQuery Waypoints</h1>
  <h2 class="my-sticky-element">Infinite Scroll</h2>
</div>

<div class="inner">
  <p>First include the shortcut script.</p>

  <pre><code>&lt;<span class="fn">script</span> <span class="kw">src</span>=<span class="str">"/path/to/waypoints-infinite.min.js"</span>&gt;&lt;<span class="fn">/script</span>&gt;</code></pre>

  <p>The Infinite Scroll shortcut is used to transform a traditional "Next Page" navigation into an AJAX-powered infinite scrolling UI pattern. Its default usage looks like this:</p>

  <pre><code><span class="fn">$</span>(<span class="str">'.infinite-container'</span>).<span class="fn">waypoint</span>(<span class="str">'infinite'</span>);</code></pre>

  <p>In this example, our shortcut will create a waypoint to be fired when the bottom of <code>.infinite-container</code> comes into view. When that waypoint fires it will go through several steps:</p>
</div>

<div class="steps">
  <div class="inner">
    <ol>
      <li><strong>Fire the <code>onBeforePageLoad</code> callback.</strong> This callback can be passed to the infinite shortcut in the options object. For our simple example, we have no callback.</li>
      <li><strong>Add the <code>infinite-loading</code> class to the container.</strong> This class gives us a way to style the container during loading. It should be used to give the user a hint that more content is being loaded.</li>
      <li><strong>Send an AJAX request for the next page.</strong> The script will look for a link with a class of <code>infinite-more-link</code> and use its <code>href</code> as the new location to fetch.</li>
      <li><strong>Append new items from the returned HTML.</strong> When the AJAX request returns it looks for any HTML elements with a class of <code>infinite-item</code> and appends them to the container.</li>
      <li><strong>Replace the "more" link.</strong> The newly returned page should also contain a link to its own next page. It looks for the element with class <code>infinite-more-link</code> and replaces the existing one.</li>
      <li><strong>Remove the <code>infinite-loading</code> class.</strong></li>
      <li><strong>Fire the <code>onAfterPageLoad</code> callback.</strong> As with the first callback, this can be passed in as an option but defaults to a no-op.</li>
    </ol>
  </div>
</div>

<div class="inner">
  <p>These steps are repeated every time the user reaches the bottom of the container until the AJAX request does not return a "more" link element, as this indicates we're on the last page. At that point the waypoint is destroyed.</p>

  <p>The "infinite" waypoint function accepts a number of options in addition to the usual Waypoints options. Here are the defaults:</p>
</div>

<div class="options">
  <div class="inner">
    <pre><code><span class="fn">$</span>(<span class="str">'.infinite-container'</span>).<span class="fn">waypoint</span>(<span class="str">'infinite'</span>, {
  <span class="key">container</span>: <span class="str">'auto'</span>,
  <span class="key">items</span>: <span class="str">'.infinite-item'</span>,
  <span class="key">more</span>: <span class="str">'.infinite-more-link'</span>,
  <span class="key">offset</span>: <span class="str">'bottom-in-view'</span>,
  <span class="key">loadingClass</span>: <span class="str">'infinite-loading'</span>,
  <span class="key">onBeforePageLoad</span>: $.noop,
  <span class="key">onAfterPageLoad</span>: $.noop
});</code></pre>

    <dl>
      <dt>container</dt>
      <dd>The default value of <code>'auto'</code> means that the element <code>.waypoint</code> is called on will act as the container. Newly loaded items are appended to this container. This can be set to a different selector, but should only be done when you want the waypoint trigger element to be different from the container of infinite items.</dd>
      <dt>items</dt>
      <dd>A selector string that matches the items to pull from each AJAX loaded page and append to the container.</dd>
      <dt>more</dt>
      <dd>A selector string that matches the next-page link.</dd>
      <dt>offset</dt>
      <dd>The same as the normal Waypoints offset option, but we set the default to <code>'bottom-in-view'</code> instead of <code>0</code>.</dd>
      <dt>loadingClass</dt>
      <dd>The class that is added to the container during page loads and removed after items are appended.</dd>
      <dt>onBeforePageLoad</dt>
      <dd>A function to execute before the AJAX request is sent off to load a new page.</dd>
      <dt>onAfterPageLoad</dt>
      <dd>A function to execute after new page items have been loaded and appended to the container.</dd>
    </dl>
  </div>
</div>

<div class="inner example">
  <h3>Example</h3>
  <div class="infinite-container">
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
  </div>

  <a href="." class="infinite-more-link">More</a>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="../../waypoints.js"></script>
<script src="waypoints-infinite.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('.infinite-container').waypoint('infinite');
});
</script>

</body>
</html>